body {
  background-color: #dddddd;
}

.web-index-header {
  width: 100%;
  height: 170px;

  .header-line-wrapper {
    background-color: #e3e4e5;
    height: 30px;

    .header-wrapper {
      position: relative;
      width: 1190px;
      margin: 0 auto;
      height: 100%;
      color: #000000;
      display: flex;
      justify-content: space-between;

      .header-addr {
        flex: 60px 0 0;
        display: flex;
        height: 100%;
        align-items: center;
        cursor: pointer;

        .icon-dizhi {
          color: red;
          cursor: pointer;
          padding: 0 5px 0 0;
        }

        .text {
          font-size: 12px;
          color: #666666;
        }
      }

      .header-nav {
        .nav {
          display: flex;
          height: 100%;
          align-items: center;

          li > a {
            font-size: 12px;
            color: #666666;
            display: inline-block;
            padding: 0 5px;
            height: 30px;
            line-height: 30px;
          }

          li:first-child > .login {
            margin-right: 5px;
          }

          li:first-child > .reg {
            color: red;
          }

          > li:after {
            content: "|";
            font-size: 8px;
            color: #999999;
            padding: 0 5px;
          }

          li.service {

            .dropdown {
              position: relative;
              display: inline-block;

              .dropdown-content {
                display: none;
                position: absolute;
                z-index: 1;
                width: 200px;
                padding: 20px 10px;
                background-color: white;
                box-sizing: border-box;
                right: 0;
              }
            }

            .dropdown:hover {
              background-color: white;
              box-shadow: 0 0px 3px rgba(7, 17, 27, 0.5);
            }

            .dropdown:hover .dropdown-content {
              display: block;
              box-shadow: 0 3px 3px rgba(7, 17, 27, 0.5);
            }
          }

          li.web-nav {
            .dropdown {
              //position: relative;
              display: inline-block;
              border: 1px solid rgba(7, 17, 27, 0);

              .dropdown-content {
                display: none;
                position: absolute;
                z-index: 1;
                width: 1190px;
                height: 200px;
                background-color: white;
                box-sizing: border-box;
                border: 1px solid rgba(7, 17, 27, 0.5);
                border-top: none;
                left: 0;
                top: 30px;
              }
            }

            .dropdown:hover {
              background-color: white;
              border: 1px solid rgba(7, 17, 27, 0.5);
              border-bottom: none;
            }

            .dropdown:hover .dropdown-content {
              display: block;
              box-shadow: 0 3px 3px rgba(7, 17, 27, 0.5);
            }
          }
        }
      }
    }

  }

  .search-wrapper-outer {
    width: 100%;
    background-color: white;

    .header-search-wrapper {
      width: 1190px;
      height: 140px;
      margin: 0 auto;
      //background-color: #00FFFF;
      display: flex;

      .logo-wrapper {
        flex: 190px 0 0;
        display: flex;
        justify-content: center;
        align-items: center;

        .link {
          .link-img {
            width: 190px;
            height: 120px;
          }
        }
      }

      .search-wrapper {
        flex: 1;
        display: flex;
        margin-left: 50px;

        .search {
          display: flex;
          align-items: center;

          > form {
            display: flex;

            .text-wrapper {
              height: 32px;
              box-sizing: border-box;
              border: 2px solid red;

              .input {
                height: 100%;
                padding-left: 20px;
                width: 460px;
              }

              .icon-changyongicon- {
                padding: 0 10px;
                cursor: pointer;
                font-weight: 900;

                &:hover {
                  color: red;
                }
              }
            }

            .search-btn {
              display: flex;
              justify-content: center;
              align-items: center;
              width: 70px;
              height: 32px;
              box-sizing: border-box;
              border: 2px solid red;
              background-color: red;
              color: white;
            }
          }
        }

        .settleup {
          display: flex;
          justify-content: center;
          align-items: center;
          margin-left: 10px;

          .settleup-wrapper {
            display: flex;
            height: 32px;
            box-sizing: border-box;
            border: 1px solid #cccccc;
            cursor: pointer;

            &:hover {
              border: 1px solid red;
            }

            .settleup-icon {
              display: flex;
              justify-content: center;
              align-items: center;
              position: relative;
              margin-left: 10px;
              width: 34px;
              height: 30px;
              color: red;
              cursor: pointer;

              .count {
                position: absolute;
                right: -5px;
                top: 0;
                color: white;
                width: 16px;
                height: 16px;
                line-height: 16px;
                text-align: center;
                background-color: red;
                font-size: 12px;
                border-radius: 100%;
              }
            }

            .settleup-text {
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 12px;
              color: red;
              padding: 0 8px;
            }
          }
        }
      }

      .treasure-wrapper {
        flex: 190px 0 0;
        display: flex;
        justify-content: center;
        align-items: center;

        .link {
          .link-img {
            width: 190px;
            height: 120px;
          }
        }
      }
    }
  }
}

.web-index-streamer {

  width: 100%;
  min-height: 300px;

  .streamer-inner-wrapper {
    width: 1190px;
    min-height: 300px;
    margin: 10px auto 0 auto;
    display: flex;

    .streamer-1-wrapper {
      flex: 190px 0 0;
      min-height: 300px;
      background: url("../../static/images/streamer-1-wrapper-bg.png") no-repeat;
      background-size: 190px 470px;
    }

    .streamer-2-wrapper {
      flex: 1;
      min-height: 300px;
      margin: 0 10px;
      display: flex;

      .streamer-carousel-lg {
        flex: 590px 0 0;
        height: 470px;
        min-height: 300px;
      }

      .streamer-carousel-sm {
        flex: 1;
        margin-left: 10px;
        height: 470px;

        .carousel-item-item {
          //background-color: red;

          .img-item {
            width: 190px;
            height: 150px;

            &:nth-child(2) {
              margin: 10px 0;
            }

            > img {
              width: 100%;
              height: 100%;
              cursor: pointer;

              &:hover {
                opacity: 0.8;
              }
            }
          }
        }
      }
    }

    .streamer-3-wrapper {
      flex: 190px 0 0;
      min-height: 300px;
      background: url("../../static/images/streamer-3-wrapper-bg.png") no-repeat;
      background-size: 190px 470px;
    }

  }
}

.web-index-content {
  width: 100%;
  margin-top: 35px;

  .content-wrapper {
    width: 1270px;
    height: 590px;
    margin: 0 auto;
    background-image: url("http://img30.360buyimg.com/babel/s1270x590_jfs/t1/116759/10/7396/192239/5ec3b235E6b6580d9/1f1582bc48663cde.jpg");

    .content-header {
      width: 1190px;
      height: 140px;
      margin: 0 auto;
    }

    .inner-wrapper {
      width: 1190px;
      height: 450px;
      margin: 0 auto;
      display: flex;

      .inner-col-left {
        display: flex;
        width: 1000px;
        flex-wrap: wrap;
        height: 440px;

        .inner-item {
          width: 190px;
          height: 210px;
          margin-right: 10px;

        }
      }

      .inner-col-right {
        .inner-item {
          margin-bottom: 10px;
          width: 190px;
          height: 100px;
        }
      }
    }
  }

  .recommend-wrapper {
    width: 1200px;
    margin: 30px auto 0 auto;

    .recommend-title {
      width: 1190px;
      margin: 0 auto;

      .text {
        width: 100%;
        height: 45px;
        line-height: 45px;
        text-align: center;
        font-size: 28px;
        font-weight: 700;

        &:before {
          content: "";
          display: inline-block;
          width: 25px;
          height: 20px;
          margin-right: 25px;
          background-image: url("https://misc.360buyimg.com/mtd/pc/index_2019/1.0.0/assets/sprite/floor_hd/sprite.png");
          background-repeat: no-repeat;
          background-position: left center;
        }

        &:after {
          content: "";
          display: inline-block;
          width: 25px;
          height: 20px;
          margin-left: 25px;
          background-image: url("https://misc.360buyimg.com/mtd/pc/index_2019/1.0.0/assets/sprite/floor_hd/sprite.png");
          background-repeat: no-repeat;
          background-position: -25px center;
        }

      }
    }

    .recommend-nav-wrapper {
      width: 1190px;
      margin: 0 auto;
      background-color: white;

      .recommend-nav {
        width: 1080px;
        height: 60px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;

        .item-wrapper {
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;

          .item-link {
            display: flex;
            flex-direction: column;
            width: 100%;
            text-align: center;
            padding: 5px 0;
            align-items: center;

            .link-btn {
              width: 80px;
              height: 27px;
              line-height: 27px;
              border-radius: 27px;
              font-weight: 600;
              color: black;

              &.active {
                background-color: red;
                color: white;
              }
            }

            .text {
              height: 21px;
              line-height: 21px;
              font-size: 14px;
              color: #666666;

              &.active {
                color: red;
              }
            }
          }
        }
      }
    }

    .recommend-content-wrapper {
      width: 1200px;
      margin: 10px auto 0 auto;
      display: none;

      &.active {
        display: block;
      }

      .recommend-content {
        width: 1200px;
        margin: 10px auto 0 auto;
        display: flex;
        flex-wrap: wrap;

        .good-wrapper {
          margin: 0 5px 10px 5px;
          flex: 230px 0 0;
          height: 322px;
          background-color: white;

          .link {
            .good-img {
              width: 100%;
              height: 220px;
              display: flex;
              justify-content: center;
              align-items: center;

              > img {
                width: 150px;
                height: 150px;
              }
            }

            .good-title {
              width: 190px;
              height: 65px;
              margin: 0 auto;

              .title {
                height: 48px;
                font-size: 14px;
                line-height: 24px;
                text-align: left;
                color: #666;
                -webkit-transition: color .2s ease;
                transition: color .2s ease;
                word-break: break-all;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;

                .icon {
                  padding: 0 5px;
                  background-color: red;
                  border-radius: 3px;
                  color: white;

                  &.normal {
                    display: none;
                  }
                }
              }
            }

            .good-price {
              width: 190px;
              margin: 0 auto;
              color: red;

              .icon {
                font-size: 12px;
                font-weight: 700;
              }

              .price {
                font-size: 20px;
                font-weight: 700;
              }

              .pointer {
                font-size: 12px;
              }
            }
          }
        }
      }
    }

  }
}
